<template>
	<view>
		<!-- 保障详情 -->
		<view class="box" v-if="types==1">
			<view class="banner-bg-detail">
				<view class="banner-detail">
					<image src="../../static/image/myHelp_12.png" mode="" class="bg"></image>
					<view class="detail-box">
						<view class="card-title">
							互助权益电子凭证
						</view>
						<view class="card-user-info flex flai fljc" v-if="info.person">
							<text>{{info.person.name}}</text>
							<text>NO.{{info.person.memberNo}}</text>
						</view>
						<view class="card-plan" v-if="info.plan">
							{{info.plan.name}} | 等待期
						</view>
						<view class="card-bottom flex flai fljcsb" :style="{'margin-top': (show ? '20rpx':'60rpx')}">
							<view class="card-bottom-left" @click="showHash">
								存证哈希 查看 <image src="../../static/image/arrow-right-white.png" mode=""></image>
							</view>
							<view class="card-bottom-right flex flai" @click="tabH(1,info.station.captitalId)">
								<image src="../../static/image/myHelp_13.png" mode=""></image>
								<text>资产权益</text>
							</view>
						</view>
						<transition name="fade">
							<view v-if="show" @click="copy(info.order.linkCode)" style="margin-top:10rpx;font-size:22rpx;color:#fff;padding:0 30rpx;word-wrap: break-word;text-align: left;">{{info.order.linkCode}}
							</view>
						</transition>
					</view>
				</view>
			</view>

			<view class="detail-info-box">
				<view class="swiper-item">
					<view class="section-box" v-if="info.order&&info.person">
						<view class="section flex">
							<view class="section-title main-title">会员</view>
							<view class="section-con main-title flex1">{{info.person.name}}</view>
						</view>
						<view class="section flex">
							<view class="section-title">与本人关系</view>
							<view class="section-con flex1">{{info.order.relationName}}</view>
						</view>
						<view class="section flex">
							<view class="section-title">身份证号</view>
							<view class="section-con flex1">{{info.person.cardid|cardMessage}}</view>
						</view>
						<view class="section flex">
							<view class="section-title">最高保障期限</view>
							<view class="section-con flex1">{{info.plan.years}}年</view>
						</view>
						<view class="section flex">
							<view class="section-title">最高保障金额</view>
							<view class="section-con flex1 flex">{{info.person.age|ageMoney}}万 <navigator url="" class="green ml20">升级保障 ></navigator>
							</view>
						</view>
						<view class="section flex">
							<view class="section-title">保障生效日期</view>
							<view class="section-con flex1">{{info.order.effectiveDate}}</view>
						</view>
						<view class="section flex">
							<view class="section-title">计划起期</view>
							<view class="section-con flex1">{{info.order.activeDate}}</view>
						</view>
						<view class="section flex">
							<view class="section-title">等待期限</view>
							<view class="section-con flex1">{{info.order.waitDays}}天</view>
						</view>
						
						<view class="table_bottom">
							<view class="condition-rule tableSafe">
								<view class="table-headsafe">
									保障101种重疾(含癌症) 初次确诊可赔
								</view>
								<view class="table-trsafe flex">
									<text class="flex1">年龄（周岁，含周岁当年）</text>
									<text class="flex1">最高互助金额（人民币）</text>
								</view>
								<view class="table-trsafe flex">
									<text class="flex1">30天～29周岁</text>
									<text class="flex1">35万</text>
								</view>
								<view class="table-trsafe flex">
									<text class="flex1">30岁～39周岁</text>
									<text class="flex1">30万</text>
								</view>
								<view class="table-trsafe flex">
									<text class="flex1">40岁～49周岁</text>
									<text class="flex1">20万</text>
								</view>
								<view class="table-trsafe flex">
									<text class="flex1">50岁～59周岁</text>
									<text class="flex1">10万</text>
								</view>
							
							</view>
						</view>
					
						<!-- 协议查看 -->
						<view class="apct flex">
							<navigator :url="'/pages/protocol/health?id='+item.id+'&planId='+info.plan.id+'&index='+index" v-for="(item,index) in ruleList">《{{item.name}}》</navigator>
						</view>
					</view>
				</view>
			</view>
			<view class="detail-bottom flex fljcsb">
				<view class="detail-bottom-list">
					<image src="../../static/image/s_02.png" mode="" @click="donate"></image>
					<text>申请互助金</text>
				</view>
				<view class="detail-bottom-list" @click="toChangePeople">
					<image src="../../static/image/s_01.png" mode=""></image>
					<text>变更保障人</text>
				</view>
				<view class="detail-bottom-list" @click="donate">
					<image src="../../static/image/s_03.png" mode=""></image>
					<text>公益捐赠</text>
				</view>
			</view>
			<!-- 放弃保障 -->
			<view class="mask" v-if="isShowMask">
				<view class="safe-pouple">
					<image src="../../static/image/bell.png" mode=""></image>
					<view class="safe-box">
						<view class="safe-title">
							公益捐赠后，互助计划立即终止，用户将失去互助保障，资产收益将捐赠给互助基金，用来帮助患病会员。
						</view>
						<view class="safe-bottom flex">
							<view class="flex1" @click="waiveCofirm">
								放弃保障
							</view>
							<view class="flex1" @click="againThink">
								我再想想
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 放弃保障按钮 -->
			<navigator v-if="info.order" :url="'/pages/myMutualHelp/waiveProperty?id='+info.order.id" class="abandon">放弃保障</navigator>
		</view>

		<!-- 资产详情 -->
		<view class="box" v-if="types==2">
			<view class="banner-bg-detail">

				<view class="banner-detail">
					<image v-if="infos.capitale&&infos.capital.investType==1" src="../../static/image/tariffIncome.png" mode="" class="bg"></image>
					<image v-if="infos.capital&&infos.capital.investType==0" src="../../static/image/helpMoney.png" mode="" class="bg"></image>
					<view class="detail-box">
						<view class="card-title">
							光伏电站资产权益电子凭证
						</view>
						<view class="card-user-info flex flai fljc">
							<text>{{infos.fullName}}</text>
							<text v-if="infos.station">NO.{{infos.station.sn}}</text>
						</view>
						<view class="card-plan" v-if="infos.station">
							{{infos.station.name}}
						</view>
						<view class="card-bottom flex flai fljcsb" :style="{'margin-top': (showLook ? '20rpx':'60rpx')}">
							<view class="card-bottom-left" @click="lookHash">
								存证哈希 查看 <image src="../../static/image/arrow-right-white.png" mode=""></image>
							</view>
							<view class="card-bottom-right flex flai" @click="tabH(2,infos.capital.linkId)">
								<image src="../../static/image/myHelp_13.png" mode=""></image>
								<text>保障权益</text>
							</view>
						</view>
						<transition name="fade">
							<view v-if="showLook" @click="copy(infos.capital.linkCode)" style="margin-top:10rpx;font-size:22rpx;color:#fff;padding:0 30rpx;word-wrap: break-word;text-align: left;">{{infos.capital.linkCode}}
							</view>
						</transition>
					</view>
				</view>
			</view>
			<view class="property-info-box flex flai">
				<view class="flex1">
					<text>{{infos.days}}</text>
					<text>持有天数</text>
				</view>
				<view class="flex1">
					<text>42</text>
					<text>总发电量(kw/h)</text>
				</view>
				<view class="flex1">
					<text>30</text>
					<text>累计收益(元)</text>
				</view>
			</view>
			<view class="slide-property">
				<scroll-view scroll-x="true" class="tab-h" :scroll-left="scrollLeft">
					<view class="flex flai fljcsb property-nav">
						<view class="tab-item" :class="[currentTab==index?'active':'']" :data-current="index" v-for="(item,index) in navList"
						 :key="" @click="swichNav">{{item}}</view>
					</view>
				</scroll-view>
				<swiper class="tab-content" :class="[currentTab==0?'property-swiper':'']" :current="currentTab" duration="300"
				 @change="switchTab">
					<!-- 电站详情 -->
					<swiper-item style="height: 800rpx;">
						<view class="section-box" style="padding: 0;">
							<view class="condition-rule table property-table" v-if="infos.station">
								<view class="property-table-head">
									基本情况
								</view>
								<view class="table-tr flex">
									<text class="flex1">装机总容量</text>
									<text class="flex1">{{infos.station.totalCapacity}}MW</text>
								</view>
								<view class="table-tr flex">
									<text class="flex1">上网电价</text>
									<text class="flex1">{{infos.station.onNetPrice}}元/kwh</text>
								</view>
								<view class="table-tr flex">
									<text class="flex1">自发自用电价</text>
									<text class="flex1">{{infos.station.selfPrice}}元/kwh</text>
								</view>
								<view class="table-tr flex">
									<text class="flex1">自发自用占比</text>
									<text class="flex1">{{infos.station.selfRatio}}%</text>
								</view>
								<view class="table-tr flex">
									<text class="flex1">电站预计年发电量</text>
									<text class="flex1">{{infos.station.predictYearQuantity}}kwh</text>
								</view>
								<view class="property-table-head">
									产品参数
								</view>
								<view class="table-tr flex" v-for="(productItem,index) in JSON.parse(infos.station.capitalParameter)">
									<text class="flex1">{{productItem.label}}</text>
									<text class="flex1">{{productItem.val}}</text>
								</view>

								<view class="table-tr flex">
									<text class="flex1">安装日期</text>
									<text class="flex1">{{infos.station.setupDate}}</text>
								</view>
								<view class="table-tr flex">
									<text class="flex1">并网日期</text>
									<text class="flex1">{{infos.station.onGridDate}}</text>
								</view>
								<view class="property-table-head">
									持有信息
								</view>
								<view class="table-tr flex">
									<text class="flex1">建站公司</text>
									<text class="flex1">{{infos.station.buildCompany}}</text>
								</view>
								<view class="table-tr flex">
									<text class="flex1">运营公司</text>
									<text class="flex1">{{infos.station.operateCompany}}</text>
								</view>
								<view class="table-tr flex">
									<text class="flex1">电站地址</text>
									<text class="flex1">{{infos.station.address}}</text>
								</view>
							</view>
							<view class="map-btn">GIS地图</view>
						</view>
					</swiper-item>
					<!-- 发电详情 -->
					<swiper-item>
						<view class="electricity-box flex flai">
							<view class="flex1">
								<text>42714.37</text>
								<text>累计发电量(kw)</text>
							</view>
							<view class="flex1">
								<text>441</text>
								<text>累计发电量(kw)</text>
							</view>
						</view>
						<view class="electricity-tab flex">
							<text :class="[b==1?'day-active':'']" @click="dayTab(1)">日</text>
							<text :class="[b==2?'mon-active':'']" @click="dayTab(2)">月</text>
							<text :class="[b==3?'year-active':'']" @click="dayTab(3)">年</text>
						</view>
						<view class="echar-box1">
							<!-- 引入的mpvue-echarts组件 -->
							<canvas canvas-id="canvasColumn" id="canvasColumn" class="echar-box1"></canvas>
						</view>
					</swiper-item>
					<!-- 收益情况 -->
					<swiper-item>
						<view class="earnings-box flex flai" v-if="infos.income">
							<text>累计收益(元)</text>
							<text>{{infos.income.total}}</text>
						</view>
						<view class="echar-box2">
							<!-- 引入的mpvue-echarts组件 -->
							<canvas canvas-id="canvasTwo" id="canvasTwo" class="echar-box1"></canvas>
						</view>
					</swiper-item>
					<!-- 相关文件 -->
					<swiper-item>
						<view class="file-box">
							<view class="fileBoxWrap">

								<view v-if="infos.station">
									<view class="fileFir" v-for="(items,index) in JSON.parse(infos.station.fileList)">
										<view>{{items.fileName}}</view>
										<view>
											<image v-for="(item,index) in items.urlList" :src="item.url" @tap="_previewImage(item.url)"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '../../components/u-charts/u-charts.js'; //引入图标文件
	import h5Copy from '../../static/junyi-h5-copy.js'; //引入复制粘贴
	var _self;
	var canvaLineA = null; //图表的画线
	import {
		addNotScroll,
		removeNotScroll
	} from '../../static/common.js'
	import api from '../../api/index.js'
	export default {
		data() {
			return {
				showLook: false, //存证哈希隐藏显示
				ruleList: [], //协议列表
				isShowMask: false, //公益捐助弹框（暂时没开通）
				info: {}, //保障详情的信息
				types: '', //保障详情和资产详情类型判断
				navList: ['电站详情', '发电情况', '收益情况', '相关文件'], //资产详情的tab配置文件
				num: 1, //保障详情和资产详情的切换使用
				currentTab: 0, //预设当前项的值
				scrollLeft: 0, //tab标题的滚动条位置
				b: 1, //图表的使用
				cWidth: '', //图表的使用
				cHeight: '', //图表的使用
				show: false, //保障详情哈希值隐藏显示
				pixelRatio: 1, //图表的使用
				infos: {}, //资产详情的数据
				chartData: {
					categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
					series: [{
						name: '',
						data: [820, 932, 901, 934, 1290, 1330, 1320],
						color: '#2fc25b'
					}]
				}, //图表的假数据
				chartDataTwo: {
					categories: ['2012', '2013', '2014', '2015', '2016', '2017'],
					series: [{
						name: '',
						data: [820, 932, 901, 934, 1290, 1330, 1320],
						color: '#FF9D02'
					}]
				}, //图表的假数据
				orderId: '', //订单id
				fileList: [], //相关文件
			}
		},
		onLoad(opt) {
			this.types = opt.type; //获取type的值判断显示
			this.orderId = opt.orderId; //订单id
			if (this.types == 1) {
				this.getDetail(this.orderId)
				uni.setNavigationBarTitle({
					title: "保障详情"
				})
			} else if (this.types == 2) {
				_self = this;
				this.cWidth = uni.upx2px(750);
				this.cHeight = uni.upx2px(500);
				this.getServerData();
				this.getEarningsData();
				this.getList(this.orderId)
				uni.setNavigationBarTitle({
					title: "资产详情"
				})
			}
		},
		methods: {
			// 预览图片
			_previewImage(image) {
				var imgArr = [];
				imgArr.push(image);
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
			// 复制粘贴哈希值
			copy(data) {
				const result = h5Copy(data)
				if (result === true) {
					uni.showToast({
						title: '复制成功',
					})
				} else {
					uni.showToast({
						title: '复制失败',
						icon: 'none'
					})
				}
			},
			// 保障详情的哈希值显示隐藏
			showHash() {
				this.show = !this.show
			},
			// 资产详情的哈希值显示隐藏
			lookHash() {
				this.showLook = !this.showLook
			},
			// 切换保障详情和资产详情
			tabH(num, ids) {
				if (num == 1) {
					_self = this;
					this.cWidth = uni.upx2px(750);
					this.cHeight = uni.upx2px(500);
					this.getServerData();
					this.getEarningsData();
					this.getList(ids)
					this.types = 2;
					uni.setNavigationBarTitle({
						title: "资产详情"
					})
				} else {
					this.getDetail(ids)
					this.types = 1;
					uni.setNavigationBarTitle({
						title: "保障详情"
					})
				}
			},
			// 发电情况
			getElectricityDetail(id) {
				var data = {
					type: this.b,
					id: id
				}
				api.myHelp.electricityDetail(data).then(res => {
					if (res.code == 1) {
						var list = res.data
						var val = []
						var dateList = []
						for (var k in list) {
							val.push(list[k].val)
							dateList.push(list[k].date)
						}
						this.chartData.categories = dateList
						this.chartData.series.data = val
					}
				})
			},
			// 电站详情
			getList(id) {
				api.myHelp.myPropertyDetail({
					id: id
				}).then(res => {
					if (res.code == 1) {
						this.infos = res.data;
						this.fileList = res.data.station.fileList;
					}
				})
			},
			// 收益详情
			getEarningsDetail(id) {
				var data = {
					type: 1,
					id: id
				}
				api.myHelp.earningsDetail(data).then(res => {
					if (res.code == 1) {
						var list = res.data
						var val = []
						var dateList = []
						for (var k in list) {
							val.push(list[k].val)
							dateList.push(list[k].date)
						}
						this.chartDataTwo.categories = dateList
						this.chartDataTwo.series.data = val
					}
				})
			},
			// 发电情况数据
			getEarningsData() {
				this.showLineA('canvasTwo', this.chartDataTwo)
			},
			// 收益情况数据
			getServerData() {
				this.showLineA('canvasColumn', this.chartData)
			},
			// canvas画图
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'area',
					fontSize: 11,
					legend: {
						show: true
					},
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type: 'grid',
						gridColor: '#fff',
						gridType: 'dash',
						dashLength: 8
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#fff',
						dashLength: 8,
						splitNumber: 5,
						min: 10,
						max: 180

					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {

						area: {
							type: 'straight',
							opacity: 0.3,
							addLine: true,
							width: 2
						}
					}
				});

			},
			// 电力日期选择
			dayTab(index) {
				this.b = index
			},
			// 滚动切换标签样式
			switchTab: function(e) {
				this.currentTab = e.detail.current
				this.checkCor();
			},
			// 点击标题切换当前页时改变样式
			swichNav: function(e) {
				var cur = e.currentTarget.dataset.current;
				if (this.currentTab == cur) {
					return false;
				} else {
					this.currentTab = cur
				}
			},
			//判断当前滚动超过一屏时，设置tab标题滚动条。
			checkCor: function() {
				if (this.currentTab > 4) {
					this.scrollLeft = 300
				} else {
					this.scrollLeft = 0
				}
			},
			// 获取协议列表
			getRuleList(id) {
				api.cms.lookPlanRule({
					id: id,
					isNew: '1'
				}).then(res => {
					if (res.code == 1) {
						this.ruleList = res.data[0].list
					}
				})
			},
			// 获取保障详情数据
			getDetail(id) {
				api.myHelp.safeguardDetail({
					id: id
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data[0]
						this.getRuleList(this.info.plan.id)
					}
				})
			},
			// 去变更保障人页面
			toChangePeople() {
				uni.navigateTo({
					url: '/pages/myMutualHelp/changeGuaranteePeople?planid=' + this.info.plan.id + '&orderId=' + this.info.order.id
				})
			},
			// 公益捐赠
			donate() {
				uni.showToast({
					title: '功能暂未开放',
					icon: 'none'
				})
				// this.isShowMask = true
				// addNotScroll()
			},
			// 确定放弃保障
			waiveCofirm() {
				this.isShowMask = false
				removeNotScroll()
			},
			// 再想想
			againThink() {
				this.isShowMask = false
				removeNotScroll()
			}
		}
	}
</script>

<style>
	@import "../../static/css/common.css";
	@import url("./myMutualHelp.css");
</style>
